<template>
  <view class="indexs">
    <view
      :class="'header ' + (banertrue ? 'header_lan' : '')"
      :style="'padding-top: ' + navH + 'px;'"
    >
      <view
        class="header_height"
        :style="
          'height:' +
          gaodu +
          'px;line-height:' +
          gaodu +
          'px;top:' +
          gaodutops +
          'px;'
        "
      >
        <view class="index_h_cont3">
          <view class="index_wenben_img" @tap="jumpzuo">
            <image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
          </view>
          <view class="index_wenben baise">{{
            $t("page_sharing_manage.Group_management")
          }}</view>
        </view>
      </view>
      <view class="coloe_title">s</view>
    </view>
    <view class="index_banner" style="position: absolute; background: #fff">
      <image :src="imgUrl + '/dzx_img148.png'" mode="widthFix"></image>
    </view>
    <view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
      <view class="mys_jifen">
        <view class="mys_jifen_center">
          <view class="index_swiper">
            <!--Tab布局-->
            <view class="index_title">
              <block v-for="(item, index) in malllist" :key="index">
                <view
                  :data-id="index"
                  :class="
                    'mall_dis ' + (currentIndex == index ? 'mall_on' : '')
                  "
                  @tap="getcurrentid"
                >
                  <view class="mall_t1">{{ item.name }}</view>
                </view>
              </block>
              <view
                class="mys_xians_po"
                :style="'width:' + width + 'px;left:' + left + 'px;'"
              >
                <view class="mys_xians"></view>
              </view>
            </view>
            <!--内容布局-->
            <view class="index_list">
              <swiper
                class="swiper paid_list_cont"
                @change="pagechange"
                :current="currentIndex"
                :style="'height:' + height + ';'"
              >
                <block v-for="(item, index) in malllist" :key="index">
                  <swiper-item>
                    <view :class="'index_list_heji' + index">
                      <view
                        class="mys_shenqingcy_list"
                        v-if="arrlist.length != 0"
                      >
                        <view
                          class="mys_shenqingcy_cont"
                          v-for="(item, index1) in arrlist"
                          :key="index1"
                        >
                          <view class="mys_shenqingcy_cont_title">
                            <view class="mys_shenqingcy_cont_l">
                              <image :src="imgUrl + '/dzx_img27.png'"></image>
                              <text
                                >{{ $t("page_sharing_manage.Package_number")
                                }}{{ item.order_sn }}</text
                              >
                            </view>
                            <view
                              class="mys_shenqingcy_cont_r"
                              :style="item.status == 3 ? 'color:#4ad5ac;' : ''"
                            >
                              {{ item.status["text"] }}
                            </view>
                          </view>
                          <view class="mys_shenqingcy_cont_dis">
                            <view class="mys_shenqingcy_cont_t1"
                              >{{ $t("page_sharing_manage.shipping_country")
                              }}{{ item.country.title }}</view
                            >
                            <view class="mys_shenqingcy_cont_t1"
                              >{{ $t("page_sharing_manage.Prepellet_weight")
                              }}{{ item.predict_weight }}</view
                            >
                            <view class="mys_shenqingcy_cont_t1"
                              >{{ $t("page_sharing_manage.Opening_time")
                              }}{{ item.start_time }}</view
                            >
                            <view class="mys_shenqingcy_cont_t1"
                              >{{ $t("page_sharing_manage.Creation_time")
                              }}{{ item.create_time.text }}</view
                            >
                          </view>
                          <view class="my_dingdan_btns">
                            <view
                              class="my_dingdan_btns1"
                              v-if="item.status.value < 3"
                              @tap="cancle"
                              :data-id="item.order_id"
                            >
                              {{ $t("page_sharing_manage.Disband_group") }}
                            </view>
                            <view
                              class="my_dingdan_btns2"
                              @tap="applyInPack"
                              v-if="item.applypack"
                              :data-id="item.order_id"
                              >{{
                                $t("page_sharing_manage.Application_package")
                              }}</view
                            >
                          </view>
                        </view>
                      </view>
                      <view class="my_dingdan_zanwu" v-else>
                        <image :src="imgUrl + '/dzx_img43.png'"></image>
                        <text>{{ $t("page_sharing_manage.hint") }}</text>
                      </view>
                    </view>
                  </swiper-item>
                </block>
              </swiper>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require("../../utils/require");

export default {
  data() {
    return {
      navH: app.globalData.navHeight,
      gaodu: app.globalData.height,
      gaodutops: app.globalData.top,
      imgUrl: app.globalData.imgUrl,
      malllist: [
        {
          id: 0,
          name: "全部拼团",
        },
        {
          id: 1,
          name: "拼团中",
        },
        {
          id: 2,
          name: "已取消",
        },
        {
          id: 3,
          name: "已结束",
        },
      ],
      height: 0,
      heights: 0,
      currentIndex: 0,
      left: 16,
      false: false,
      width: 0,
      //分页
      page: 1,
      ispage: true,
      arrlist: [],
      type: 0,
      //0全部，2待查验，3已查验
      keyword: "",
    };
  }, //滑动显示顶部
  onPageScroll: function (e) {
    if (e.scrollTop > this.navH + 50) {
      this.banertrue= true
    } else {
      this.banertrue= false
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    var that = this;
    that.changeline();
  },
  onShow() {
    var that = this;
    that.page= 1
    that.ispage= true
    that.arrlist= []
    that.manageList(that.type);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.ispage) {
      this.page= this.page + 1
      this.chayanlist(this.type);
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    huiche(e) {
      this.keyword= e.detail.value
      this.page= 1
      this.ispage= true
      this.arrlist= []
      this.chayanlist(this.type);
    },
    manageList(e) {
      var that = this;
      var data = {
        status: e,
        token: uni.getStorageSync("token"),
        page: that.page,
      };
      request
        .get(
          `index.php?s=/api/sharp.order/managelist&wxapp_id=` +
            uni.getStorageSync("web_id"),
          data
        )
        .then((res) => {
          if (res.data.code == 1) {
            if (that.page > res.data.data.list.last_page) {
              that.ispage= false
            } else {
              that.arrlist= that.arrlist.concat(res.data.data.list.data)
            }
            setTimeout(() => {
              that.swiperhegiht(that.currentIndex);
            }, 100);
          }
        });
    },
    cancle(e) {
      var that = this;
      var data = {
        token: uni.getStorageSync("token"),
        id: e.currentTarget.dataset.id,
      };
      uni.showModal({
        title: "提示",
        content: "确认要解散该拼团活动？",
        success(res) {
          if (res.confirm) {
            request
              .post(
                `index.php?s=/api/sharp.order/dissolution&wxapp_id=` +
                  uni.getStorageSync("web_id"),
                data
              )
              .then((res) => {
                if (res.data.code == 1) {
                  uni.showToast({
                    title: res.data.data,
                  });
                  setTimeout(() => {
                    that.page= 1
				    that.ispage= true
				    that.arrlist= []
                    that.baoguolist(that.type);
                  }, 1000);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "none",
                  });
                }
              });
          } else {
            if (res.cancel) {
            }
          }
        },
      });
    },
    //swiper切换时会调用
    pagechange: function (e) {
      var that = this;
      that.currentIndex= e.detail.current
      that.page= 1
      that.ispage= true
      that.arrlist= []
      that.type= that.malllist[e.detail.current].id
      that.keyword= ""
      that.manageList(that.type);
      that.changeline();
    },

    //swiper单击事件
    getcurrentid(e) {
      this.currentIndex= e.currentTarget.dataset.id
    },

    //swiper选项卡的高度
    swiperhegiht(es) {
      console.log(es, "es");
      var that = this;
      var query = uni.createSelectorQuery();
      query.selectAll(".index_list_heji" + es).boundingClientRect();
      query.exec((res) => {
        var listHeight = res[0][0].height;
        that.height= listHeight + "px"
        that.heights= res[0]
      });
    },

    //下标线左右滑动效果
    changeline: function (e) {
      const query = uni.createSelectorQuery();
      var that = this;
      console.log(e);
      query.select(".mall_on").boundingClientRect();
      query.exec(function (res) {
        if (res[0] != null) {
          that.left= res[0].left
          that.width= res[0].width
        } else {
          that.left= 0
        }
      });
    },

    jumpzuo() {
      uni.navigateBack();
    },
  },
};
</script>
<style>
@import "./sharing_manage.css";
</style>
